<template>
  <uni-swiper-dot
    :info="info"
    :current="current"
    :vertical="vertical"
    field="content"
    :dots-styles="dotsStyles"
    mode="round"
  >
    <slot></slot>
  </uni-swiper-dot>
</template>

<script>
export default {
  props: {
    vertical: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Array,
      default: [],
    },
    current: {
      type: Number,
      default: 0,
    },
    type: {
      type: String,
      default: "white",
    },
  },
  watch: {
    type: {
      handler(val) {
        if (val == "blue") {
          this.dotsStyles.backgroundColor = "#DDDDDD";
          this.dotsStyles.selectedBackgroundColor = "#2998FF";
        }
      },
      immediate: true, //是否监听初始
    },
  },
  data() {
    return {
      dotsStyles: {
        backgroundColor: "rgba(255, 255, 255, .5)",
        border: "0px ",
        selectedBackgroundColor: "rgba(255, 255, 255, 1)",
        selectedBorder: "0px ",
      },
    };
  },
  onLoad: function () {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.uni-bg-red {
  background-color: red;
}
</style>
